// 导入 React，用来创建 react 元素的
import React from 'react';
// 导入对应渲染平台库
import ReactDOM from 'react-dom/client';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 定义一个函数组件
// 1、函数定义
function Hello1() {
  return <h1>Hello1</h1>;
}
// 2、函数表达式
const Hello2 = function () {
  return <h1>Hello2</h1>;
};
// 3、箭头函数
const Hello3 = () => {
  return <h1>Hello3</h1>;
};

// 4、不渲染任何内容: return null/undefined
const Hello4 = () => {
  return undefined;
};

// 渲染到页面上
root.render(
  <div>
    <Hello1 />
    <Hello2></Hello2>
    <Hello3 />
    <Hello4 />
  </div>
);
